<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementui.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/elementui.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>

</head>
<body class="hold-transition">
<div id="app">
    <div class="app-container">
        <div class="box">
            <div class="filter-container">

                <!--查询条件部分  searchmap -->
                <el-form ref="form" :inline="true" label-width="80px">
                    <el-form-item label="名字">
                        <el-input v-model="searchMap.ename" placeholder="名字"></el-input>
                    </el-form-item>

                    <!--<el-form-item label="品牌的首字母" label-width="100px">
                        <el-input v-model="searchMap.hobby"  placeholder="品牌" ></el-input>
                    </el-form-item>-->

                    <el-form-item>
                        <el-button type="primary" @click="fetchData()">查询</el-button>
                        <el-button type="primary" @click="add()">新增</el-button>
                    </el-form-item>
                </el-form>

                <!--table 展示区-->
                <template>
                    <el-table
                            :data="tableData"
                            border style="width: 100%">
                        <el-table-column
                                prop="eid"
                                label="id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ename"
                                label="名字"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="sex"
                                label="性别"
                                width="180" :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="hobby"
                                label="爱好"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="img"
                                label="头像">
                        </el-table-column>
                        <el-table-column
                                prop="birthday"
                                label="生日" :formatter="timeFormat">
                        </el-table-column>
                        <el-table-column
                                prop="addr"
                                label="地址">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">    
                                <el-button  @click="edit(scope.row.eid)" type="text" size="small"> 修改</el-button> 
                                <el-button  @click="dele(scope.row.eid)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <div class="pagination-container">
                    <!--分页插件 -->
                    <el-pagination
                            class="pagiantion"
                            @size-change="sizeChange"
                            @current-change="fetchData"
                            :current-page.sync="searchMap.page"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="searchMap.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

                    <!--新增、修改编辑框-->
                    <el-dialog
                            title="编辑"
                            :visible.sync="dialogVisible"
                            width="50%">
                        <span>
                            <el-form ref="form" :inline="true" label-width="100px">
                                <el-input v-model="pojo.eid" type="hidden"></el-input>
                                <el-form-item label="名字">
                                    <el-input v-model="pojo.ename" placeholder="xxxxxx"></el-input>
                                </el-form-item>
                                <el-form-item label="性别">
                                     <el-radio v-model="pojo.sex" label="1" >男</el-radio>
                                     <el-radio v-model="pojo.sex" label="0" >女</el-radio>
                                </el-form-item>
                                <el-form-item label="爱好">
                                    <el-input v-model="pojo.hobby"  placeholder="爱好" ></el-input>
                                </el-form-item>
                                <el-form-item label="头像">
                                    <el-input v-model="pojo.img"  placeholder="头像" ></el-input>
                                </el-form-item>
                                <el-form-item label="生日">
                                    <el-date-picker
                                            v-model="pojo.birthday"
                                            type="date"
                                            placeholder="生日选择日期" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="地址">
                                    <el-input v-model="pojo.addr"  placeholder="地址" ></el-input>
                                </el-form-item>
                            </el-form>
                        </span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="save()">保 存</el-button>
                        </span>
                    </el-dialog>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    const brand = new Vue({
        el:"#app",
        data(){
            return{
                tableData:[],
                total: 10,
                searchMap:{
                    ename:"",
                    page:1,
                    size: 5
                },
                dialogVisible :false,
                pojo:{

                }
            }
        },
        created(){
            this.fetchData();
        },
        methods:{
            formatter(row,column){
              return row.sex>1?"未知":row.sex==0?'女':'男';
            },
            timeFormat(row, column) {
                //日期格式化
                var datac = row[column.property];
                var time = new Date(datac)
                var year = time.getFullYear()
                var month = time.getMonth() + 1
                var date = time.getDate()
                var hours = time.getHours()
                var minutes = time.getMinutes()
                var seconds = time.getSeconds()
                function add0(m) {
                    return m < 10 ? '0' + m : m
                }
                var startTime = add0(year) + '-' + add0(month) + '-' + add0(date)
                //var startTime = add0(year) + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds)
                return startTime
            },
            sizeChange(v){
                this.searchMap.size = v;
                this.fetchData();
            },
            fetchData(){
                var item = localStorage.getItem("token");
                if(item!=null){
                    axios.post("/car/list",this.searchMap).then(function (resp) {
                        brand.tableData  = resp.data.rows;
                        brand.total = resp.data.total;
                    })
                }else{
                    location.href="/car/list";
                }

            },
            save(){
                console.info(this.pojo)
                axios.post("/consumer/saveEmp",this.pojo).then(res=>{

                    var result = res.data;
                    if(result=='succ'){
                        this.dialogVisible =false;
                        this.fetchData();
                    }else{
                        alert('保存失败');
                    }


                })
            },
            edit(id){
                //打开框
                this.dialogVisible =true;
                //根据id查询对象  回显
                axios.get("/consumer/findById/"+id).then(res=>{
                    brand.pojo = res.data;
                    var sex =brand.pojo.sex;
                    brand.pojo.sex = sex+"";
                    console.info(brand.pojo)
                    alert(brand.pojo);
                })
            },
            dele(id){
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    axios.get("/consumer/deleteById?id="+id).then(response => {
                        if(response.data=="succ"){
                            this.fetchData (); //刷新列表
                        }else{
                            this.$alert("删除失败")
                        }
                    })
                })
            },
            add(){
                this.dialogVisible=true;
                this.pojo={};
            }
        }
    })
</script>
</body>
</html>